<template>
	<view class="container">
		<view class="top-container">
			<view class="line-horizontal">
				<view v-if="currentIndex == 0">
					<view class="item-select-root">
						<view class="item-select"></view>
					</view>
				</view>
				<view v-if="currentIndex > 0">
					<view class="item-select"></view>
				</view>
				<view :class="currentIndex > 0 ? 'line-select': 'line-unselect'"></view>

				<view v-if="currentIndex < 1">
					<view class="item-unselect"></view>
				</view>
				<view v-if="currentIndex == 1">
					<view class="item-select-root">
						<view class="item-select"></view>
					</view>
				</view>
				<view v-if="currentIndex > 1">
					<view class="item-select"></view>
				</view>
				<view :class="currentIndex > 1 ? 'line-select': 'line-unselect'"></view>
				<view v-if="currentIndex == 2">
					<view class="item-select-root">
						<view class="item-select"></view>
					</view>
				</view>
				<view v-if="currentIndex < 2">
					<view class="item-unselect"></view>
				</view>
			</view>
			<view class="text-root">
				<view :class="currentIndex>=0 ? 'text-select' :'text-unselect'">{{$t('language.jindu1')}}
				</view>
				<view :class="currentIndex>0 ? 'text-select' :'text-unselect'">{{$t('language.jindu2')}}
				</view>
				<view :class="currentIndex>1 ? 'text-select' :'text-unselect'">{{$t('language.jindu3')}}</view>
			</view>
		</view>
		<view class="basic-info-container" v-if="currentIndex == 0">
			<view class="basic-top-container">
				<view class="title-container">
					<image class="title-image" :src="goods_img"></image>
					<view class="title-name">{{goods_name}}</view>
				</view>
			</view>
			<view class="num-container">
				<view :class="index == currentNumberIndex ? 'num-item':'num-item-unselect'"
					v-for="(item,index) in numList" :key="index" @click="switchIndex(item,index)">
					<image v-if="index == currentNumberIndex" class="item-num-image"
						src="../../static/icon_number_select.png"></image>
					<view class="num-row-container">
						<image class="num-image" :src="$imgUrl+item.goods_img"></image>
						<view class="num-text">x {{item.gold_sum}}</view>
					</view>
					<view class="num-price">{{$t('language.shoujia')}} ¥{{item.price}}</view>
				</view>
			</view>
			<view class="pay-way-container">
				<view class="pay-way-title">{{$t('language.paystyle')}}</view>
				<view :class="currentPayIndex == index&&index<2 ? 'pay-way-select':'pay-way-unselect'"
					v-for="(item,index) in paywayList" @click="switchPayIndex(index)">
					<image class="pay-way-image" src="../../static/icon_number_select.png"
						v-if="currentPayIndex == index&&index<2"></image>
					<image class="pay-way-icon" v-if="item.src" :src="item.src"></image>
					<view class="pay-way-ttext">{{item.name}}</view>
				</view>
			</view>
			<view class="pay-way-container" style="justify-content: space-between;">
				<view class="pay-way-title">{{$t('language.shuliang')}}:({{stock>0?`有货(${stock})`:'无货'}})</view>
				<view class="add-plus-container">
					<view class="add" @click="reduce">-</view>
					<view class="num-num">{{sum}}</view>
					<view class="add" @click="add">+</view>
				</view>
			</view>
		</view>
		<view class="ensure" v-if="currentIndex == 0">
			<view class="ensure-button" @click="ensure">{{$t('language.queren')}}</view>
			<view class="ensure-button" @click="back">{{$t('language.home')}}</view>
			<view class="shiyong-button" @click="openImg">{{$t('language.shiyongfangfa')}}</view>
		</view>
		<view class="basic-info-container" v-if="currentIndex == 2">
				<view class="basic-top-container">
					<view class="title-container">
						<image class="title-image" :src="$imgUrl+currOrder.goods_img"></image>
						<view class="title-name">{{currOrder.goods_name}}</view>
					</view>
				</view>
				<image class="buy-success-image" src="../../static/icon_buy_success.png"></image>
				<view v-if="carmyList.length>0">
					<view class="buy-success-text">{{$t('language.buySuccess')}}</view>
					<view class="buy-success-tips-container">
						<view class="buy-success-tips-row">
							<view class="buy-success-tips">{{$t('language.chongzhi')}}</view>
							<view class="buy-success-price">{{(currOrder.price)}}{{$t('language.yuan')}}</view>
							<view class="buy-success-tips">，{{$t('language.keduihuan')}}</view>
							<image class="num-image" :src="$imgUrl+currOrder.sort_img"></image>
							<view class="buy-success-price"> x{{currOrder.gold_sum}}x{{currOrder.sum}}</view>
						</view>
					</view>
					<view class="copy-text-container" style="margin-top: 60rpx;" >
						<view v-for="(item,i) in carmyList" :key="i" class="copy-top-item">
							<view class="copy-title">{{item.carmy}}</view>
							<view class="copy-diver"></view>
							<view class="copy" @click.stop="copySuccess(item.carmy)">{{$t('language.fuzhi')}}</view>
						</view>
					</view>
				</view>
				<view  v-else>
					<view class="buy-success-text">{{$t('language.wujilu')}}</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		async onLoad(options) {
			if(options.orderNo){
				this.currentIndex=2
				this.getCarmy(options.orderNo)
			}else{
				var goodObj = JSON.parse(options.goodObj);
				this.goods_name = goodObj.goods_name;
				this.goods_img = this.$imgUrl + goodObj.goods_img;
				this.$http.post('order.goodsDetail', {
					goods_id: goodObj.id,
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					if (res.data && res.data.length > 0) {
						this.numList = res.data
						this.currOrder = this.numList[0]
					}
				}).catch(e => {})
			}
			
		},
		computed:{
			stock(){
				return this.currOrder.goods_stock - this.sum
			}
		},
		methods: {
			switchIndex(item, index) {
				this.currentNumberIndex = index
				this.currOrder = item
			},
			switchPayIndex(index) {
				if(index<2){
					this.currentPayIndex = index
				}
			},
			back(){
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			openImg(){
				uni.navigateTo({
					url: '/pages/buy/shiyongfangfa'
				})
			},
			ensure() {
				if (!this.currOrder.price) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return;
				}
				if (this.currentPayIndex==1) {
					uni.showToast({
						title: '待开放',
						icon: 'none'
					})
					return;
				}
				if (this.sum==0) {
					uni.showToast({
						title: '购买数量不能少于1',
						icon: 'none'
					})
					return;
				} 
				if((this.sum>=this.currOrder.goods_stock&&this.stock<0)){
					uni.showToast({
						title: '不能超过库存',
						icon: 'none'
					})
					this.sum=this.currOrder.goods_stock
					return
				}
				this.$http.post('order.addOrder', {
					sort_id: this.currOrder.id,
					sum: this.sum,
					type: this.currentPayIndex == '0' ? 'alipay' : this.currentPayIndex == '1' ? 'wechat' : '',
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					console.log('成功',res.data)
					if (this.currentPayIndex == '0') {
						if (res.code == 1) {
							const div = document.createElement('div')
							div.innerHTML = res.data
							document.body.appendChild(div)
							document.forms[0].submit()
						}
					} else {
						location.href = res.data
					}
				}).catch(e => {
					console.log('失败',e)
					const div = document.createElement('div')
					div.innerHTML = e
					document.body.appendChild(div)
					document.forms[0].submit()
				})
			},
			// 通订单号查询卡密
			getCarmy(order_code) {
				this.$http.post('order.getCarmy', {
					order_code: order_code,
					lang:window.sessionStorage.getItem('lang') || 'cn'
				}).then(res => {
					console.log("res", res.data)
					this.currOrder=res.data
					this.carmyList = res.data.cary
				}).catch(e => {})
			},
			reduce() {
				if (this.sum <=1) {
					return false
				} else {
					this.sum--
				}
			},
			add() {
				if(this.sum < this.currOrder.goods_stock){
					this.sum++
				}else{
					return false
				}
			},
			copySuccess(context) {
				// 创建输入框元素
				let oInput = document.createElement('input');
				// 将想要复制的值
				oInput.value = context;
				// 页面底部追加输入框
				document.body.appendChild(oInput);
				// 选中输入框
				oInput.select();
				// 执行浏览器复制命令
				document.execCommand('Copy');
				// 弹出复制成功信息
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
				this.orderCode = ''
				// 复制后移除输入框
				oInput.remove();
			}
		},
		data() {
			return {
				id: '1',
				currentIndex: 0,
				currentNumberIndex: 0,
				paywayList: [{
					src: '../../static/icon_zhifubao.png',
					name: this.$t('language.zhifubao')
				}, {
					src: '../../static/icon_weixin.png',
					name: this.$t('language.weixin')
				},{
					src: '',
					name: this.$t('language.paypal')
				}
				],
				currentPayIndex: 0,
				numList: [],
				goods_img: '',
				goods_name: '',
				sum: 1,
				currOrder: {},
				carmyList: []
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.top-container {
		width: 750rpx;
		height: 414rpx;
		background: linear-gradient(141deg, #7DBEFF 0%, #4789FF 100%);
		border-radius: 0rpx 0rpx 200rpx 50rpx;
	}

	.line-horizontal {
		display: flex;
		flex-direction: row;
		width: 558rpx;
		margin-left: 96rpx;
		margin-top: 62rpx;
		align-items: center;
	}
	.shiyong-button{
		width: 100%;
		margin-bottom: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF0000;
	}
	.item-select-root {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44rpx;
		height: 44rpx;
		background: rgb(255, 255, 255, 0.3);
		border-radius: 50%;
	}

	.item-select {
		width: 20rpx;
		height: 20rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.item-unselect {
		width: 20rpx;
		height: 20rpx;
		background: #FFFFFF;
		opacity: 0.29;
		border-radius: 50%;
	}

	.line-select {
		width: 270rpx;
		height: 8rpx;
		background: #FFFFFF;
	}

	.line-unselect {
		width: 222rpx;
		height: 8rpx;
		background: #FFFFFF;
		opacity: 0.2;
	}

	.text-select {
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.text-unselect {
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.49;
	}

	.text-root {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 15rpx;
	}

	.basic-info-container {
		width: 690rpx;
		min-height: 984rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.0500);
		border-radius: 16rpx;
		margin-top: -200rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.basic-top-container {
		width: 690rpx;
		height: 200rpx;
		background-image: url('https://newydxs.oss-cn-beijing.aliyuncs.com/bg_buy_top.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 16rpx;
	}

	.title-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 32rpx;
	}

	.title-image {
		width: 48rpx;
		height: 48rpx;
		margin-top: 40rpx;
	}

	.title-name {
		margin-left: 12rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 40rpx;
	}

	.num-container {
		display: flex;
		flex-direction: row;
		width: 594rpx;
		margin-left: 48rpx;
		margin-top: -30rpx;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.num-item {
		width: 184rpx;
		height: 158rpx;
		border-radius: 4rpx;
		border: 1px solid #4185FF;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.num-item-unselect {
		width: 184rpx;
		height: 158rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1px solid #D1D2D5;
		position: relative;
		flex-direction: column;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}

	.item-num-image {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.num-row-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
	}

	.num-image {
		width: 32rpx;
		height: 32rpx;
	}

	.num-text {
		margin-left: 12rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.8500);
	}

	.num-price {
		margin-bottom: 16rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.pay-way-container {
		display: flex;
		margin-left: 48rpx;
		margin-top: 48rpx;
		width: 594rpx;
		flex-direction: row;
		align-items: center;
	}

	.pay-way-title {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
	}

	.pay-way-select {
		width: 140rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1px solid #4185FF;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.pay-way-unselect {
		width: 140rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1px solid rgba(0, 0, 0, 0.3000);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.pay-way-image {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.pay-way-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.pay-way-ttext {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.add-plus-container {
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.add {
		width: 32rpx;
		height: 32rpx;
		border: 1px solid #D1D2D5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 28rpx;
	}

	.num-num {
		font-size: 26rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.ensure {
		width: calc(100% - 20rpx);
		margin: 0 10rpx 10rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.0500);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.ensure-button {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(270deg, #4185FF 0%, #73B1FF 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 15rpx;
	}

	.buy-success-image {
		width: 406rpx;
		height: 278rpx;
		margin-top: 30rpx;
		margin-left: 142rpx;
	}

	.buy-success-text {
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		width: 690rpx;
		margin-top: 40rpx;
		text-align: center;
	}

	.buy-success-tips-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
	}

	.buy-success-tips-row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.buy-success-tips {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.buy-success-price {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4185FF;
	}

	.copy-text-container {
		width: 490rpx;
		margin-left: 100rpx;
	}

	.copy-top-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 82rpx;
		background: rgba(245, 245, 245, 0.5000);
		border-radius: 4rpx;
		border: 1rpx dashed #D1D2D5;
		margin-top: 16rpx;
		justify-content: space-between;
	}

	.copy-title {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		margin-left: 30rpx;
		flex: 1;
	}

	.copy-diver {
		width: 1rpx;
		height: 42rpx;
		margin-left: 30rpx;
		background: #CCCCCC;
		margin-right: 30rpx;
	}

	.copy {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4185FF;
		margin-right: 30rpx;
	}
</style>
